/*eslint-disable*/
import React from "react";
import "./Task.less";
import moment from "moment";
// 使用ANTD组件库
import {
  Button,
  Divider,
  Table,
  Popconfirm,
  message,
  Modal,
  Form,
  Input,
  DatePicker,
} from "antd";
const { TextArea } = Input;
const formatTime = (time) => {
  return moment(time).format("YYYY-MM-DD HH:mm");
};
export default class Task extends React.Component {
  Columns = [
    {
      title: "编号",
      dataIndex: "taskId",
      key: "taskId",
    },
    {
      title: "任务描述",
      dataIndex: "taksDesc",
      key: "taksDesc",
    },
    {
      title: "状态",
      dataIndex: "taskStatus",
      key: "taskStatus",
    },
    {
      title: "完成时间",
      dataIndex: "taskTime",
      key: "taskTime",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <div style={{ display: "flex", gap: "8px" }}>
          <Popconfirm
            title="删除任务"
            description="确定要删除这个任务吗？"
            okText="确定"
            cancelText="取消"
            onConfirm={() => this.handleDelete(record)}
          >
            <Button type="primary" size="small" danger>
              删除
            </Button>
          </Popconfirm>
          <Button type="primary" size="small">
            完成
          </Button>
        </div>
      ),
    },
  ];
  constructor(props) {
    super(props);
    this.state = {
      isOpenModel: false,
      dataSource: [
        {
          key: "1",
          taskId: "001",
          taksDesc: "测试任务描述",
          taskStatus: "已完成",
          taskTime: "2023-05-01 15:23",
        },
        {
          key: "2",
          taskId: "002",
          taksDesc: "测试任务描述",
          taskStatus: "未完成",
          taskTime: "2023-05-01 15:00",
        },
      ],
    };
  }

  handleDelete = (record) => {
    console.log(record);
    const newDataSource = [...this.state.dataSource];
    const index = newDataSource.findIndex(
      (item) => item.taskId === record.taskId
    );
    if (index > -1) {
      newDataSource.splice(index, 1);
      this.setState(
        {
          dataSource: newDataSource,
        },
        () => {
          message.success("删除成功");
        }
      );
    }
  };
  showModal = () => {
    this.setState({
      isOpenModel: true,
    });
  };
  handleOk = async () => {
    try {
      await this.formRef.validateFields();
      let data = this.formRef.getFieldsValue();
      this.setState({
        dataSource: [
          ...this.state.dataSource,
          {
            key: this.state.dataSource.length + 1,
            taskId: (this.state.dataSource.length + 1)
              .toString()
              .padStart(3, "0"),
            taksDesc: data.taksDesc,
            taskStatus: "未完成",
            taskTime: formatTime(data.taskTime),
          },
        ],
      });
      this.setState(
        {
          isOpenModel: false,
        },
        () => {
          this.formRef.resetFields();
          message.success("新增成功");
        }
      );
    } catch (error) {
      console.log(error);
    }
  };
  handleCancel = () => {
    this.setState({
      isOpenModel: false,
    });
    this.formRef.resetFields();
  };
  onChange = (date, dateString) => {
    console.log(date, dateString);
  };
  onFinish = (values) => {
    console.log("Success:", values);
  };
  onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  render() {
    const { dataSource, isOpenModel } = this.state;
    return (
      <>
        <div className="task-box">
          <div className="header">
            <h3>TASK OA任务管理系统</h3>
            <Button type="primary" onClick={this.showModal}>
              新增任务
            </Button>
          </div>
          <Divider style={{ margin: "10px 0" }}></Divider>
          <div className="button-list">
            <Button className="button" type="primary">
              全部
            </Button>
            <Button className="button">未完成</Button>
            <Button className="button">已完成</Button>
          </div>
          <div className="table">
            <Table dataSource={dataSource} columns={this.Columns}></Table>
          </div>
          <Modal
            title="新增任务窗口"
            open={isOpenModel}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            okText="提交信息" // 设置确认按钮文字
            cancelText="取消" // 设置取消按钮文字
          >
            <Form
              ref={(x) => (this.formRef = x)}
              layout="vertical"
              name="basic"
              initialValues={{
                remember: true,
              }}
              onFinish={this.onFinish}
              onFinishFailed={this.onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                label="任务描述"
                name="taksDesc"
                rules={[
                  {
                    required: true,
                    message: "请输入任务描述",
                  },
                ]}
              >
                <TextArea rows={4} />
              </Form.Item>

              <Form.Item
                label="任务预计完成时间"
                format="YYYY-MM-DD HH:mm"
                name="taskTime"
                rules={[
                  {
                    required: true,
                    message: "请输入预计完成时间",
                  },
                ]}
              >
                <DatePicker
                  showTime
                  onChange={this.onChange}
                  style={{ width: "260px" }}
                />
              </Form.Item>
            </Form>
          </Modal>
        </div>
      </>
    );
  }
}
